<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 2. css中， .class 的值 即可命中对于的元素 */
       .city{
        color: red;
        background-color: yellow;
       }
       .name{
        color: blueviolet;
        background-color:chartreuse;
       }
       span{
        /* 元素如果同时添加了class 的样式和 元素选择的样式 
        .class 的优先级更高 
        */
        font-style: italic;
        background-color: red;
       }
    </style>
  </head>

  <body>
    <h1>大国重器传来好消息！江门中微子实验大科学装置正式运行</h1>
    <span> 江门中微子实验探测器位于广东省江门市附近的地下700米处 </span>
    <p>
      <!-- 1. 设置给元素class 属性 -->
      可以探测53公里外<span class="city">台山</span>和 <span class="city">阳江</span> 核电站产生的 <span class="name">中微子</span> ,并以前所未有的精度测量它们的能谱。与国际同类实验相比,<span class="city">江门</span> <span class="name">中微子</span>实验对质量顺序的测定不受地球物质效应和其他未知中微子振荡参数的影响,并将显著提高6个中微子振荡参数中的三个参数的精度。
    </p>
  </body>
</html>
